<template>
    <div class="langs">
        <el-dropdown @command="clickCommand" trigger="click" size="large">
            <span class="el-dropdown-link">
                {{  language=='zh' ?'中文':'English'}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="zh" :disabled="language == 'zh'">中文</el-dropdown-item>
                    <el-dropdown-item command="en" :disabled="language == 'en'">English</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>                                             
    </div>
</template>

<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'//引入消息弹出框框架
import { ref } from 'vue'//引入响应
import { useI18n} from 'vue-i18n'

const language = ref(localStorage.getItem('language')||'zh')//默认语言为中文
const {locale}=useI18n()//i18n的一种方法
//点击切换语言事件
const clickCommand = (e: string) => {
    localStorage.setItem("language", e);
    locale.value=e;//赋值
    language.value=e;//每次切换语言时重新赋值一遍
    ElMessage.success('设置成功')
}

</script>

<style lang="less" scoped>
.langs {
    margin-top: 20px;
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>